<template>
	<scroll-view class="content-style" scroll-y lower-threshold="30" @scrolltolower="scrolltolower" style="height: calc(100vh - var(--window-bottom));">
		<view class="header-top">
			<image class="logo" src="@/static/image/logo.png"></image>
		</view>
		<view class="content-absolute">
			<view class="search-box">
				<image src="@/static/image/seach.png"></image>
				<input class="input" v-model="title" placeholder="关键词搜索" @input="input" @confirm="confirm"/>
			</view>
			<!-- #ifdef ZXWY -->
			<view class="institution">
				<text @click="selectInstitution">{{institution.name || '按机构查询'}}</text>
			</view>
			<!-- #endif -->
			 <u-tabs :list="tabs" lineWidth="40" lineColor="#fff" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="changeStatus">
			</u-tabs>
			<view class="content-box">
				<view v-if="list.length > 0">
					<view class="item-box" v-for="(item, index) in list" :key="index" @click="detail(item)">
						<image class="thumb" :src="item.imgs" mode="aspectFill"></image>
						<view class="right-box">
							<view>
								<text class="title line-clamp">{{item.title}}</text>
								<text class="description line-clamp">{{item.description}}</text>
							</view>
							<text class="time">{{item.createdAt}}</text>
						</view>
						<block v-if="item.illuminate == 1">
							<view class="status-tag drl">待认领</view>
						</block>
						<block v-else-if="item.illuminate == 2">
							<view class="status-tag yrl">已认领</view>
						</block>
						<block v-else-if="item.illuminate == 3">
							<view class="status-tag zxz">执行中</view>
						</block>
						<block v-else-if="item.illuminate == 4">
							<view class="status-tag ywc">已完成</view>
						</block>
					</view>
				</view>
				<view v-else class="zwsj-box">
					<image src="@/static/image/zwsj.png"></image>
					<text>抱歉, 没有找到你想要的内容</text>
				</view>
			</view>
		</view>
		<uni-institution-list ref="institution" @clickCompany="clickCompany"></uni-institution-list>
	</scroll-view>
</template>

<script>
	import { institution } from '@/api/index/index';
	import { list } from '@/api/wish/index';
	export default {
		data() {
			return {
				activeStyle: {
					color: '#fff',
					fontWeight: 'bold',
					transform: 'scale(1.1)'
				},
				inactiveStyle: {
					color: '#fff',
					transform: 'scale(1)'
				},
				page: 1,
				total: 0,
				list: [],
				title: '',
				status: 0,
				institutions: [],
				institution: {
					id: '',
					name: '按机构查询'
				},
				tabs: [{
					name: '全部'
				}, {
					name: '待认领'
				}, {
					name: '已认领'
				}, {
					name: '执行中'
				}, {
					name: '已完成'
				}]
			}
		},
		onLoad() {
			this.loadInstitutions();
			this.loadData();
			uni.$on('claimSuccess', response => {
				this.page = 1;
				this.loadData();
			})
			uni.$on('paySuccess', response => {
				this.page = 1;
				this.loadData();
			})
		},
		methods: {
			/* 获取机构列表数据 */
			loadInstitutions() {
				institution(response => {
					this.institutions = response;
				}) 
			},
			
			/* 获取心愿墙分页数据 */
			loadData() {
				const params = {
					page: this.page,
					limit: 10,
					illuminate: this.status,
					title: this.title,
					code: this.institution.code
				}
				list(params, (response, total) => {
					this.total = total;
					if (this.page == 1) {
						this.list = response;
					}else {
						this.list = this.list.concat(response);
					}
				})
			},
			
			/* 删除输入框内容 自动刷新界面 */
			input(e) {
				if (!e.detail.value) {
					this.loadData();
				}
			},
			
			/* 输入框确定 */
			confirm() {
				if (!this.title) {
					return;
				}
				this.loadData();
			},
			
			/* 选择机构 */
			selectInstitution() {
				this.$refs.institution.dialogVisible(this.institution, this.institutions);
			},
			
			/* 选择机构 */
			clickCompany(item) {
				this.institution = item;
				this.loadData();
			},
			
			/* 切换状态 */
			changeStatus(e) {
				let index = e.index;
				if (this.status == index) {
					return;
				}
				this.status = index;
				this.page = 1;
				this.loadData();
			},
			
			/* 跳转详情 */
			detail(item) {
				uni.navigateTo({
					url: `detail?id=${item.id}`
				})
			},
			
			scrolltolower() {
				if (this.total > this.list.length) {
					this.page++
					this.loadData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		display: flex;
		align-items: center;
		margin: 40rpx 30rpx 0;
		width: 690rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		image {
			margin: 0 20rpx 0 25rpx;
			width: 30rpx;
			height: 33rpx;
		}
		.input {
			margin-right: 30rpx;
			flex: 1;
			font-size: 28rpx;
		}
	}
	
	.institution {
		margin: 40rpx 30rpx;
		color: #fff;
		font-size: 26rpx;
		text {
			border-radius: 10rpx;
			border: 1rpx solid white;
			padding: 5rpx 20rpx;
		}
	}
	
	.content-box {
		display: flex;
		flex-direction: column;
		height: 500rpx;
		border-radius: 40rpx 40rpx 0 0;
		padding-top: 20rpx;
		background-color: #F5F6F7;
	}
	
	.item-box {
		display: flex;
		margin: 15rpx 25rpx;
		padding: 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		border: 1rpx solid #EBECF1;
		box-sizing: border-box;
		.thumb {
			width: 210rpx;
			height: 170rpx;
			border-radius: 16rpx;
		}
		.status-tag {
			position: absolute;
			width: 120rpx;
			height: 40rpx;
			border-radius: 16rpx 0 16rpx 0;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			&.drl {
				background-color: #428FFC;
				
			}
			&.yrl {
				background-color: #2FA78E;
			}
			&.zxz {
				background-color: #FFAD01;
			}
			&.ywc {
				background-color: #AFB8C4;
			}
		}
		.right-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			flex: 1;
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #101010;
			}
			.description {
				margin-top: 15rpx;
				font-size: 26rpx;
				color: #999999;
				height: 30rpx;
				line-height: 30rpx;
			}
			.time {
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
	.zwsj-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 150rpx;
		image {
			width: 215rpx;
			height: 160rpx;
		}
		text {
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>